<div>
<div class="form-inline">
	<?php
	echo "Add Area";
	?>
	&nbsp;
	<?php 
	echo $this->Form->input('username', array('label' => false, 'id' => 'inputarea', 'div' => false, 'style' => "width : 250px" ));
	?>
	&nbsp;
	<?php
			echo $this->Html->link('<i class = "icon-plus icon-blue"></i>&nbspAdd/Save',
				"#",
				array('id' => 'addarea', 'class' => 'btn ', 'div' => false, 'style' => "width : 80px" , 'escape' => false)); 
	?>
</div>
<br>
<div  style = "width : 900px">
	<div class = "form-inline" style = "float: left">
		<?php
			echo "Add Items" ;
		?>
		&nbsp;
		<div class="btn-group" >
			<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"  style = "width : 150px"> 
			Choose Item for Area <span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<!-- dropdown menu links -->
				<li><a class = "view" id="label">Label</a></li>
				<li><a class = "view" id="text">Text</a></li>
				<li><a class = "view" id="checkbox">Checkbox</a></li>
				<li><a class = "view" id="link">Link</a></li>
				<li><a class = "view" id="button">Button</a></li>
				<li><a class = "view" id="radio">Radio</a></li>
				
			</ul>
		</div>
	</div>
	<div class="form-inline" style = "float: right">
		<?php
//		echo $this->Html->link('<i class = "icon-eye-open"></i>&nbspView',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn ', 'div' => false, 'style' => "width : 80px", 'escape' => false )); 
		?>
		&nbsp;
		<?php
//		echo $this->Html->link('<i class="icon-trash icon-black"></i>&nbspDelete',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn', 'div' => false, 'style' => "width : 80px", 'escape' => false )); 
		?>
		&nbsp;
		<?php
//		echo $this->Html->link('<i class="icon-edit icon-black"></i>&nbspEdit',
//			array('controller' => 'management', 'action' => '#'),
//			array('class' => 'btn', 'div' => false, 'style' => "width : 80px" , 'escape' => false )); 
		?>
	</div>
</div>
</div>

<script type="text/javascript">
var ajaxLoadArea = "<?php echo $this->Html->url(array('controller' => 'services', 'action' => 'load_area')); ?>";
	$(document).ready(function() {
		// xu ly them Area cho screen
		$("#addarea").click(function() {
			var addarea = $("#inputarea").val();
			if (!addarea){
				$('#popup_msg').bPopup();
				return false;
			}
			if (addarea){
				$('input[type="text"]').each(function() {
                if (this.id.indexOf("inputarea") === 0) {
                    this.value = "";
                }
            });
			}
			
     	});
		$(".close").click(function(){
			$("#popup_msg").bPopup().close();
		});
		// xy ly them item cho Area :label, text, checkbox, button, link, radio..
		$('a.view').live("click",function(){
			var id = $(this).attr('id');
			var url = "/test_case/management/items/" + id;
			$('#popup_add').bPopup({
				positionStyle: 'fixed',	
				modalColor: '#333333',
				transition: 'slideDown',	
				contentContainer:'.content',
				loadUrl: url
			});	
					
		});
		$(".close").click(function(){
			$("#popup_add").bPopup().close();
		});
		// Hien thi Items theo Area da duoc chon
		$(".option").click(function(){
			var value = $(this).val();
		// alert(value);return false;
			$.ajax({
                type: 'GET',
                url: ajaxLoadArea,
                data: {value: value},
                success: function(data) {
                	$("#select2").html(data);
                }
            });
		});
	});
</script>
<div id ="popup_add"  class = "popup">
	<button type="button" class="close " data-dismiss="modal" >&times;</button>
	<div class="content" ></div> 
</div>
<br>
<br>
<div id = "content1">
	<div class = "maincontent">
		<div class = "main1">
			<label style = "color: green; font-size: 16px">Area/Items Name</label>
		</div>
		<div class = "main2">
			<label style = "color: green; font-size: 16px">Type</label>
		</div>
		<div class = "main3">
			<label style = "color: green; font-size: 16px">TestCase Num</label>
		</div>
		<div class = "main4">
			<label style = "color: green; font-size: 16px">Unclear Num</label>
		</div>
		<div class = "main5">
			<label style = "color: green; font-size: 16px"></label>
		</div>
		
	</div>
	<div class = "clr"></div>
	<?php for ($i = 1; $i <= 3 ; $i++):?>
	<div class="maincontent">
		<details>
			<summary style = "width: 100px">Hearder</summary>
			<?php for ($j =1; $j <=3; $j++):?>
			<div class = "main1" style= "margin-left:20px">
				Avatar
				<br/>
			</div>
			<div class = "main2">
				Image
			</div>
			<div class = "main3">
				8
				<br/>
			</div>
			<div class = "main4">
				4
				<br/>
			</div>
			<div class = "main5">
				<?php
					echo $this->Html->link('<i class="icon-edit icon-black"></i>',
						array('controller' => 'management', 'action' => 'add_area'),
						array('escape' => false )); 
				?>
				<?php
					echo $this->Html->link('<i class="icon-trash icon-black"></i>',
						array('controller' => 'management', 'action' => 'add_area'),
						array('escape' => false )); 
				?>
			</div>
		<?php endfor;?>	
		</details>
	</div>
	<?php endfor;?>
</div>

<div id = "popup_msg" class ="popup" style = "width: 300px">
	<div class="modal-header" align ="center" style = "color: green">
	    <button type="button" class="close" data-dismiss="modal" >&times;</button>
	    <?php echo $this->Html->image('msg.png', array('style' => 'width: 50px'));?>
	    <h4>Please enter a letter!</h4>
 	 </div>
	<br>
	
</div>
<style>
	#area_delere_edit{
		float: right;
	}
</style>